
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>查询</title>
    <link href="/static/iconfont.css" rel="stylesheet" />
    <meta name="format-detection" content="telephone=yes" />
    <style type="text/css">
        * {
            font-weight: normal;
            font-size: 12px;
        }

        html {
            font-size: 100px
        }

        body {
        }

        .main {
            max-width: 7.5rem;
            margin: 0 auto;
            padding-bottom: .6rem;
            background: transparent;
            /*background: #fff;*/
            padding-top: 0.7rem;
        }

        .icon-loading {
            display: inline-block;
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 1s linear infinite;
            -moz-animation: rotate 1s linear infinite;
            -o-animation: rotate 1s linear infinite;
            animation: rotate 1s linear infinite;
        }

        @-webkit-keyframes rotate {
            from {
                -webkit-transform: rotate(0deg)
            }

            to {
                -webkit-transform: rotate(360deg)
            }
        }

        @-moz-keyframes rotate {
            from {
                -moz-transform: rotate(0deg)
            }

            to {
                -moz-transform: rotate(359deg)
            }
        }

        @-o-keyframes rotate {
            from {
                -o-transform: rotate(0deg)
            }

            to {
                -o-transform: rotate(359deg)
            }
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(359deg)
            }
        }

        .back {
            height: 0.75rem;
            border-bottom: 1px solid #dddee1;
            position: fixed;
            top: 0;
            z-index: 99999;
            width: 7.5rem;
            background: #e9eaec;
            line-height: 0.75rem;
            padding-left: 0.2rem;
        }

            .back > a {
                display: inline-block;
                height: 0.6rem;
                font-size: 0.3rem;
                color: #1c2438;
                text-decoration: none;
            }

                .back > a > i {
                    font-size: 0.3rem;
                    color: #1c2438;
                }
    </style>
    <script src="/static/fastclick.min.js"></script>
    <script src="/static/vue.min.js"></script>
    <script src="/static/jquery-1.10.2.min.js"></script>
    <script src="/static/layui.extend.js"></script>
    <script src="/static/boot.min.js"></script>
    <script src="/static/layui.js"></script>
    <link href="/static/font_1024638_ykchct69upp.css" rel="stylesheet" />
</head>

<!--
<body style="padding:0;margin:0;overflow-x:hidden;background:url(/UpFiles/Bg/018CA13AC058466299BF4690A584BC12.jpg)">
-->
    <div id="myloading">
        <i class="iconfont icon-loading"></i>
    </div>
<form action="/Task/onSearchMobile" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#myPnl" id="form0" method="get">        <script type="text/javascript">
            $(document).keydown(function (event) {
                switch (event.keyCode) {
                    case 13: return false;
                }
            });
            var browser = {
                versions: function () {
                    var u = navigator.userAgent, app = navigator.appVersion;
                    return {
                        trident: u.indexOf('Trident') > -1, //IE内核
                        presto: u.indexOf('Presto') > -1, //opera内核
                        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                        mobile: !!u.match(/Mobile/), //是否为移动终端
                        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                        iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                        iPad: u.indexOf('iPad') > -1, //是否iPad
                        webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                        weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                        qq: u.match(/\sQQ/i) == " qq" //是否QQ
                    };
                }()
            }
            !function (n) {
                var e = n.document,
                    t = e.documentElement,
                    i = 750,
                    d = i / 100,
                    o = "orientationchange" in n ? "orientationchange" : "resize",
                    a = function () {
                        var n = t.clientWidth || 320; n > 750 && (n = 750);
                        t.style.fontSize = n / d + "px"
                    };
                e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
            }(window);
            $(function () {
                FastClick.attach(document.body);
            });
        </script>




<style type="text/css">
    .main {
        background: transparent;
        /*background: #fafafa;*/
        width: 7.5rem
    }

    .row-list {
        width: 7.5rem;
        margin-bottom: 0.5rem;
    }

        .row-list > .myrow {
            padding: 0.28rem 0.28rem 0 0.28rem;
            min-height: 0.7rem
        }


    .easyman-label {
        font-size: 0.30rem;
        width: 1.5rem;
        display: inline-block;
        float: left;
        height: 0.7rem;
        line-height: 0.7rem;
        color: #333;
    }

    .easyman-title {
        font-size: 0.30rem;
        /*width: 3rem;*/
        display: inline-block;
        height: 0.7rem;
        line-height: 0.7rem;
        color: #333;
    }

    .easyman-content {
        margin-left: 1.6rem;
    }

    .easyman-a {
        min-height: 0.5rem;
        color: #2858d3;
        font-size: 0.50rem;
        padding: 0.1rem 0.2rem;
    }

    .easyman-input {
        min-height: 0.5rem;
        background: #fff;
        color: #333;
        font-size: 0.30rem;
        padding: 0.1rem 0.2rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 4.9rem
    }

    .easyman-select {
        min-height: 0.7rem;
        background: #fff;
        color: #333;
        font-size: 0.30rem;
        padding: 0.1rem 0.2rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 5.3rem
    }

    .easyman-btn {
        height: 0.7rem;
        padding: 0.1rem 0.2rem;
        font-size: 0.3rem;
        outline: none;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        margin-bottom: 0.28rem
    }

    .easyman-btn-info {
        color: #fff;
        background-color: #5bc0de;
        border-color: #46b8da;
    }

    .easyman-btn-success {
        color: #fff;
        background-color: #398439;
        border-color: #255625;
    }

    .easyman-btn-bwran {
        border-color: #f0ad4e;
        background: #fff;
        color: #666
    }

    .easyman-btn-warning {
        color: #fff;
        background-color: #f0ad4e;
        border-color: #eea236;
    }

    .search-result {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .search-result > li {
            padding: 0.1rem 0 0 0.2rem;
            margin-bottom: 0;
        }

            .search-result > li:first-child {
                padding-top: 0;
            }

            .search-result > li > span {
                display: inline-block;
                font-size: 0.28rem;
                background-color: #19be6b;
                color: #fff;
                padding: 0.05rem 0.2rem;
                border-radius: 4px;
            }

    .txt-alert {
        color: rgb(128, 132, 143);
        height: auto;
        margin-left: 1.9rem;
        font-size: 0.26rem;
        padding-top: 0.1rem;
    }
</style>
<input type="hidden" id="txtjson" />

<div class="main" id="myvue">
    <div class="back">
        <a href="/index">
            <i class="iconfont icon-back"></i>
            返回
        </a>
    </div>
    <div class="row-list">

        <div class="myrow">
            <label class="easyman-label">输入号码</label>
            <div class="easyman-content">
                <input type="text" placeholder="请输入查询内容" class="easyman-input" v-model="Key" />
            </div>
        </div>
        <div v-bind:style="(Type===''||Type=='未知类型数据')?'color:#80848f':'color:#19be6b'" class="txt-alert" v-html="Type">
        </div>
        <div class="myrow">
            <label class="easyman-label">查询结果</label>
        </div>
        <div class="myrow" style="padding-top:0;">
            <div style="border:1px solid #e9eaec;border-radius:4px;padding:0.2rem;">
                <p v-if="Result==null" style="font-size:0.3rem;color:#999;margin:0">输入号码进行查询</p>
                <div v-else>
                    <ul v-if="Result.length>0" class="search-result">
                        <li v-for="item in Result">
                            <span v-html="item.Text"></span>
                        </li>
                    </ul>
                    <ul v-if="Result.length<=0" class="search-result">
                        <li>
                            <span style="background:#80848f">未查询到任何结果</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="padding:0.3rem;text-align:center">
            <button v-on:click="onSearch" type="button" class="easyman-btn easyman-btn-info" style="width:5rem;">查询</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#myvue',
        data: {
            Key: '',
            Result: null,
            Type:''
        },
        watch: {
            Key: function (val) {
                var type = '未知类型数据';
                if (val === '')
                {
                    type = '';

                } else
                {
                    type = '未知类型数据';
                    var zz = [
                        {
                            type: '手机号',
                            key: /^1[3-9][0-9]{9}$/
                        },
                        {
                            type: '日期',
                            key: /^((19|20)[0-9]{2})-((0[1-9])|10|11|12)-(([0-2][0-9])|30|31)$/
                        }
                        ,
                        {
                            type: '身份证号',
                            key: /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
                        }
                    ]

                    for (var i = 0; i < zz.length; i++)
                    {
                        if (zz[i].key.test(val))
                        {
                            type = zz[i].type;
                        }
                    }

                }
                vm.Type = type;
            }
        },
        methods: {

            onSearch: function () {
              if ( vm.Key === '')
                {
                    layer.msg('请输入查询号码');
                } else
                {
                    var index = layer.load('查询中');
                    vm.Result = null;
                    $.get("/Task/onSearchMobile", {  key: vm.Key }, function (rs) {
                        if (rs.code != 0)
                        {
                            layer.msg('查询失败，请重试')
                        } else
                        {
                            vm.Result = rs.Result;
                        }
                        layer.close(index);
                    })
                }
            }
        },
        mounted: function () {
            layui.use('layer', function () {
                layer = layui.layer;
            });
        }
    })
    $(document).keydown(function (event) {
        switch (event.keyCode)
        {
            case 13: vm.onSearch();
        }
    });
</script>        <script type="text/javascript">

            $(function () {
                $("#myloading").hide();
                SetMainHeight();
            });
            function SetMainHeight() {
                var wh = $(window).height();
                var mh = $(".main").height();
                if (mh < wh) {
                    $(".main").css('min-height', wh + "px");
                }
            }
            $(window).resize(function () {
                SetMainHeight();
            });
        </script></form>
</body>
</html>
